/*!
 * Prince - v1.0.0
 * @author AtriTheme
 * Copyright (c) 2018
 */
@import '../../../../sass/global/css/variables';
@import '../../../../sass/global/css/mixin';
/*---------------------------

START REGISTER V1

---------------------------*/

.register-background {
  background-image: url("../../../../assets/pages/register/images/register_1.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  height: 100%;
  opacity: 0.8;
  color: $white-text-color;
  overflow: auto;
  position: $position-fixed;
  width: 100%;
  &:before {
    background: rgba(0, 0, 0, 0.8);
    position: $position-fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    content: "";
  }
  .register-page {
    display: table;
    height: 100%;
    margin: $gaping-0 auto;
    width: 450px;
    position: $position-relative;
    a{
      &:hover, &:focus{
        text-decoration: none;
      }
    }
  }
  .main-register-contain {
    display: table-cell;
    vertical-align: middle;
  }
  .register-form {
    padding: $gaping-25;
    text-align: $text-center;
    h4 {
      font-size: 30px;
      margin-bottom: $gaping-5;
      text-align: $text-center;
    }
    p {
      text-align: $text-center;
      margin-bottom: $gaping-30;
    }
  }
  .btn-register{
    width: 100%;
    color: $white-text-color;
    background-color: $main-site-color;
    border-color: $main-site-color;
    margin-top: $gaping-20;
    &:hover, &:focus {
      width: 100%;
      color: $white-text-color;
      background-color: $main-site-color;
      border-color: $main-site-color;
      margin-top: $gaping-20;
    }
  }
  .register-me-bottom{
    .btn-register{
      width: 130px;
      float: $right-division;
      margin-top: $gaping-0;
    }
  }
  .forgot-password-register {
    float: $left-division;
  }
  .register-form-border {
    background: transparent;
    color: $white-text-color;
    &:focus {
      color: $white-text-color;
      background-color: transparent;
      border-color: $white-text-color;
    }
  }
  .goto-register {
    float: $right-division;
    display: table;
    width: 100%;
    margin-bottom: $gaping-15;
    a {
      color: $white-text-color;
      cursor: $text-link;
      line-height: $gaping-35;
      &:hover {
        color: $main-site-color;
      }
    }
  }
  .register-bottom-text {
    line-height: $gaping-35;
    p {
      float: $left-division;
      margin-bottom: $gaping-0;
    }
    a {
      float: $left-division;
      color: $main-site-color;
      margin-left: $gaping-10;
    }
  }
  .register-me-bottom {
    display: table;
    width: 100%;
  }
  .overlay {
    height: 100%;
    width: 0;
    position: $position-fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0);
    overflow-x: hidden;
    @include transition(0.5s);
    .closebtn {
      position: $position-absolute;
      top: $gaping-20;
      right: $gaping-45;
      font-size: 60px;
      color: $white-text-color;
      text-decoration: none;
      outline: none;
      z-index: 99;
    }
  }
  .register-overlay-form {
    margin: $gaping-0 auto;
    width: 400px;
    display: table;
    position: $position-relative;
    height: 100%;
  }
  .register-page{
    .form-group {
      position: $position-relative;
      margin: $gaping-25 $gaping-0;
      text-align: $text-left;
      input {
        display: block;
        background: none;
        padding: 2px 2px 1px;
        font-size: 14px;
        border-width: 0;
        border-color: transparent;
        line-height: 1.9;
        width: 100%;
        color: transparent;
        @include transition(all 0.28s ease);
        box-shadow: none;
        height: $gaping-25;
        &:focus {
          outline: none;
          ~ .bar::before {
            width: 100%;
            left: 0;
          }
        }
        &:focus, &:valid, &.form-file, &.has-value{
          color: $main-site-color;
        }
        &:focus ~ .control-label, &:valid ~ .control-label, &.form-file ~ .control-label, &.has-value ~ .control-label{
          font-size: 12px;
          color: $main-site-color;
          top: -15px;
          left: 0;
        }
      }
      .control-label {
        position: $position-absolute;
        top: 4px;
        pointer-events: none;
        padding-left: 2px;
        z-index: 1;
        color: $scroll-backgorund-color;
        font-size: 14px;
        font-weight: $normal-text;
        @include transition(all 0.28s ease);
      }
      .bar {
        position: $position-relative;
        border-bottom: 1px solid $main-site-color;
        display: block;
        &:before {
          content: '';
          height: 2px;
          width: 0;
          left: 50%;
          position: $position-absolute;
          background: $main-site-color;
          transition: left 0.28s ease, width 0.28s ease;
          z-index: 2;
        }
      }
    }
  }
  .social-media-section{
    margin: $gaping-15 $gaping-50;
    .social-hexagon{
      width: $gaping-40;
      height: $gaping-25;
      background: #5F6062;
      position: $position-relative;
      top: 0;
      text-align: $text-center;
      @include transition(all 0.3s ease-in-out);
      display: inline-block;
      &:before {
        content: "";
        position: $position-absolute;
        top: -10px;
        left: 0;
        width: 0;
        height: 0;
        border-left: $gaping-20 solid transparent;
        border-right: $gaping-20 solid transparent;
        border-bottom: $gaping-10 solid #5F6062;
        @include transition(all 0.3s ease-in-out);
      }
      &:after {
        content: "";
        position: $position-absolute;
        bottom: -10px;
        left: 0;
        width: 0;
        height: 0;
        border-left: $gaping-20 solid transparent;
        border-right: $gaping-20 solid transparent;
        border-top: $gaping-10 solid #5F6062;
        @include transition(all 0.3s ease-in-out);
      }
      &:hover{
        background: $main-site-color;
        cursor: $text-link;
        &:after{
          border-top: $gaping-10 solid $main-site-color;
        }
        &:before{
          border-bottom: $gaping-10 solid $main-site-color;
        }
      }
      i{
        color: white;
        font-size: 15px;
        line-height: $gaping-25;
        text-shadow: 2px 2px 10px black;
      }
    }
  }
  .checkbox {
    margin: $gaping-0;
    label {
      position: $position-relative;
      cursor: $text-link;
      padding-left: $gaping-25;
      text-align: $text-left;
      display: block;
      &:hover{
        .helper {
          color: $white-text-color;
        }
      }
    }
    input {
      width: auto;
      opacity: 0.00000001;
      position: $position-absolute;
      left: 0;
      &:checked ~ .helper {
        color: $white-text-color;
        &:before, &:after{
          opacity: 1;
          @include transition(height 0.28s ease);
        }
        &:after{
          height: 8px;
        }
        &:before{
          height: 17px;
          -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
        }
      }
    }
    .helper {
      color: $white-text-color;
      position: $position-absolute;
      top: 3px;
      left: 0;
      width: $gaping-15;
      height: $gaping-15;
      z-index: 0;
      border: 0.125rem solid currentColor;
      @include border-radius(0.0625rem);
      @include transition(border-color 0.28s ease);
      &:before, &:after{
        position: $position-absolute;
        height: 0;
        width: 3px;
        background-color: $white-backgournd-color;
        display: block;
        transform-origin: left top;
        @include border-radius(0.25rem);
        content: '';
        transition: opacity 0.28s ease, height 0s linear 0.28s;
        opacity: 0;
      }
      &:before{
        top: 9px;
        left: 7px;
        @include transform(rotate(-135deg));
      }
      &:after {
        top: $gaping-5;
        left: 0;
        @include transform(rotate(-45deg));
      }
    }
  }
  .btn{
    &.float-button-light{
      &.waves-button {
        box-shadow: none;
        white-space: normal;
        border-radius: $border-radius-0;
        padding: $gaping-10;
      }
    }
  }
}
/*---- START RESPONSIVE ----*/
@media (max-width: 1199px) {
  .register {
    background-position: right center;
  }
}

@media (max-width: 767px) {

}

@media (max-width: 479px) {
  .overlay .closebtn {
    font-size: 40px;
    top: 0;
    right: $gaping-25;
  }

  .register-page {
    width: 320px;
  }

  .register-form {
    padding: $gaping-10;
  }

  .register-form h2 {
    font-size: 25px;
  }

  .register-form p {
    margin-bottom: $gaping-15;
  }

  .btn-register, .btn-register:hover, .btn-register:focus {
    width: 100%;
  }

  .register-bottom-text {
    display: inline-flex;
  }

  .register-overlay-form {
    width: 300px;
  }
  .forgot-password-register {
    margin-bottom: $gaping-10;
  }
}

/*---- END RESPONSIVE ----*/

/*---------------------------

END REGISTER V1

---------------------------*/